<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>券维护</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link href="/node_modules/LobsterUIFrame/layuiadmin/layui/css/layui.css" rel="stylesheet" />
    <link href="/node_modules/LobsterUIFrame/layuiadmin/style/admin.css" rel="stylesheet" />
    <link href="/node_modules/LobsterUIFrame/layuiadmin/layui/css/modules/layui-icon-extend/iconfont.css"
        rel="stylesheet" />
    <script src="/node_modules/LobsterUIFrame/layuiadmin/layui/layui.js"></script>
</head>

<body>
    <style>
        .layui-form-label {
            width: 90px;
            padding: 9px 10px;
        }

        /* .layui-input-block {
        width: 90%;
    }

    .layui-input {
        width: 90%;
    }

    select {
        width: 90%;
    }*/
    </style>
    <div class="layui-fluid box">
        <div class="layui-form" lay-filter="formdata" style="padding: 0px 0px 0 0;">
            <div class="layui-card">
                <div class="layui-card-body box">
                    <input type="hidden" name="CouponId" value="0" />
                    <input type="hidden" name="CouponStatus" value="1" />
                    <input type="hidden" name="StartTime" />
                    <input type="hidden" name="EndTime" />
                    <div class="layui-form-item active">
                        <label class="layui-form-label"><i style="color:red;">*&ensp; </i>券名</label>
                        <div class="layui-input-block">
                            <input type="text" class="layui-input" name="CouponName" />
                        </div>
                    </div>
                    <div class="layui-form-item active">
                        <label class="layui-form-label">类别</label>
                        <div class="layui-input-block">
                            <select name="CouponClass"></select>
                        </div>
                    </div>
                    <div class="layui-form-item active">
                        <label class="layui-form-label">有效期类型</label>
                        <div class="layui-input-block">
                            <select name="ValidType" lay-filter="ValidType"></select>
                        </div>
                    </div>
                    <div class="layui-form-item active" id="ValidDaysDiv">
                        <label class="layui-form-label"><i style="color:red;">*&ensp; </i>有效期天数</label>
                        <div class="layui-input-block">
                            <input type="text" class="layui-input" name="ValidDays"
                                onkeyup="value=value.replace(/[^\d]/g,'')" />
                        </div>
                    </div>
                    <div class="layui-form-item active" id="DateRangeDiv">
                        <label class="layui-form-label"><i style="color:red;">*&ensp; </i>日期范围</label>
                        <div class="layui-input-block">
                            <input type="text" class="layui-input" readonly="readonly" id="DateRange"
                                name="DateRange" />
                        </div>
                    </div>
                    <div class="layui-form-item active">
                        <label class="layui-form-label">类型</label>
                        <div class="layui-input-block">
                            <select name="CouponType" lay-filter="CouponType"></select>
                        </div>
                    </div>
                    <div class="layui-form-item active" id="CouponAmountDiv">
                        <label class="layui-form-label"><i style="color:red;">*&ensp; </i>券额</label>
                        <div class="layui-input-block">
                            <input type="text" class="layui-input" name="CouponAmount"
                                onkeyup="this.value=this.value.replace(/^(\d*\.?\d{0,2}).*/,'$1')" />
                        </div>
                    </div>
                    <div class="layui-form-item active" id="CouponDiscountDiv">
                        <label class="layui-form-label"><i style="color:red;">*&ensp; </i>折扣</label>
                        <div class="layui-input-block">
                            <input type="text" class="layui-input" name="CouponDiscount"
                                onkeyup="value=value.replace(/[^\d]/g,'')" />
                        </div>
                    </div>
                    <div class="layui-form-item active" id="FullImpairmentDiv">
                        <label class="layui-form-label"><i style="color:red;">*&ensp; </i>满减值</label>
                        <div class="layui-input-block">
                            <input type="text" class="layui-input" name="FullImpairment"
                                onkeyup="this.value=this.value.replace(/^(\d*\.?\d{0,2}).*/,'$1')" />
                        </div>
                    </div>
                    <div class="layui-form-item active">
                        <label class="layui-form-label">券数量</label>
                        <div class="layui-input-block">
                            <input type="text" class="layui-input" name="CouponCount"
                                onkeyup="value=value.replace(/[^\d]/g,'')" />
                        </div>
                    </div>
                    <div class="layui-form-item active">
                        <label class="layui-form-label">限领数量</label>
                        <div class="layui-input-block">
                            <input type="text" class="layui-input" name="PerLimit"
                                onkeyup="value=value.replace(/[^\d]/g,'')" />
                        </div>
                    </div>
                    <div class="layui-form-item active">
                        <label class="layui-form-label">适应范围</label>
                        <div class="layui-input-block">
                            <select name="AdaptiveRange"></select>
                        </div>
                    </div>
                    <div class="layui-form-item active">
                        <label class="layui-form-label">适应人群</label>
                        <div class="layui-input-block">
                            <select name="AdaptivePeople"></select>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>
<script>
    layui.config({
        base: '/node_modules/LobsterUIFrame/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    });
    layui.define(['index', 'layer', 'form', 'element', 'table', 'laydate'], function () {
        var layer = layui.layer;
        var admin = layui.admin;
        var $ = layui.$;
        var form = layui.form;
        var laytpl = layui.laytpl;
        var element = layui.element;
        var setter = layui.setter;
        var upload = layui.upload;
        var laydate = layui.laydate;
        var oper = {
            data: {
                model: {},
                sellistinfo: {},
                diclist: [
                    //couponClass: [],///券类别
                    //couponType: [],//券类型
                    //couponStatus: [],//券状态
                    //validType: [],//有效期类型
                    //adaptiveRange: [],//适应范围
                    //adaptivePeople: [],//适应人群 
                ],

                tabindex: 0,
            },
            init: function () {
                var self = this;
                self.data.sellistinfo = parent.sellistinfo;
                self.data.diclist = parent.diclist;
                self.initdata();
                self.initEvent();
            },
            //获取树结构
            initdata: function () {
                var self = this;
                self.data.diclist.forEach(a => {
                    self.initSelect(a.list, a.name);
                })
                form.render("select");
                if (self.data.sellistinfo) {
                    form.val("formdata", JSON.parse(JSON.stringify(self.data.sellistinfo)));
                    if (self.data.sellistinfo.ValidType == 1) {
                        $("#DateRangeDiv").show();
                        $("#ValidDaysDiv").hide();
                    } else {
                        $("#DateRangeDiv").hide();
                        $("#ValidDaysDiv").show();
                    }
                    if (self.data.sellistinfo.CouponType == 1) {
                        $("#CouponAmountDiv").show();
                        $("#CouponDiscountDiv").hide();
                        $("#FullImpairmentDiv").show();
                    } else if (self.data.sellistinfo.CouponType == 2) {
                        $("#CouponAmountDiv").hide();
                        $("#CouponDiscountDiv").show();
                        $("#FullImpairmentDiv").show();
                    } else if (self.data.sellistinfo.CouponType == 3) {
                        $("#CouponAmountDiv").show();
                        $("#CouponDiscountDiv").hide();
                        $("#FullImpairmentDiv").hide();
                    }
                    if (self.data.sellistinfo.StartTime && self.data.sellistinfo.EndTime)
                        $("#DateRange").val(self.data.sellistinfo.StartTime.substring(0, 10) + ' ~ ' + self.data.sellistinfo.EndTime.substring(0, 10));
                } else {
                    $("#ValidDaysDiv").hide();
                    $("#CouponAmountDiv").show();
                    $("#CouponDiscountDiv").hide();
                    $("#FullImpairmentDiv").show();
                }
            },
            initSelect: function (data, name) {
                var appendHtml = '';
                data.forEach(a => {
                    appendHtml += "<option value=" + a.id + ">" + a.text + "</option>";
                })
                $("[name=" + name + "]").html(appendHtml);
            },
            //页面加载
            initEvent: function () {
                var self = this;
                var tomorrow = new Date(new Date().getTime() + 24 * 60 * 60 * 1000);
                laydate.render({
                    elem: '#DateRange'
                    , range: '~' //或 range: '~' 来自定义分割字符
                    , min: tomorrow.getFullYear() + '-' + (tomorrow.getMonth() + 1) + "-" + tomorrow.getDate()
                    , done: function (value, date, endDate) {
                        console.log(value);
                        var str = value.split(' ~ ');
                        $("[name='StartTime']").val(str[0]);
                        $("[name='EndTime']").val(str[1]);
                    }
                });
                form.on('select(ValidType)', function (data) {
                    if (data.value == 1) {
                        $("#DateRangeDiv").show();
                        $("#ValidDaysDiv").hide();
                    } else {
                        $("#DateRangeDiv").hide();
                        $("#ValidDaysDiv").show();
                    }
                });
                form.on('select(CouponType)', function (data) {
                    if (data.value == 1) {
                        $("#CouponAmountDiv").show();
                        $("#CouponDiscountDiv").hide();
                        $("#FullImpairmentDiv").show();
                    } else if (data.value == 2) {
                        $("#CouponAmountDiv").hide();
                        $("#CouponDiscountDiv").show();
                        $("#FullImpairmentDiv").show();
                    } else if (data.value == 3) {
                        $("#CouponAmountDiv").show();
                        $("#CouponDiscountDiv").hide();
                        $("#FullImpairmentDiv").hide();
                    }
                });
                parent.getResult = function () {
                    self.data.model = form.val('formdata');
                    if (!self.data.model.CouponName) {
                        layer.msg("券名不能为空");
                        return;
                    }
                    if (self.data.model.ValidType == 1) {
                        if (!self.data.model.DateRange) {
                            layer.msg("日期范围不能为空");
                            return;
                        }
                    } else {
                        if (!self.data.model.ValidDays) {
                            layer.msg("有效期天数不能为空");
                            return;
                        }
                    }
                    if (self.data.model.CouponType == 1) {
                        if (!self.data.model.CouponAmount) {
                            layer.msg("券额不能为空");
                            return;
                        }
                        if (!self.data.model.FullImpairment) {
                            layer.msg("满减值不能为空");
                            return;
                        }
                    } else if (self.data.model.CouponType == 2) {
                        if (!self.data.model.CouponDiscount) {
                            layer.msg("折扣不能为空");
                            return;
                        }
                        if (!self.data.model.FullImpairment) {
                            layer.msg("满减值不能为空");
                            return;
                        }
                    } else if (self.data.model.CouponType == 3) {
                        if (!self.data.model.CouponAmount) {
                            layer.msg("券额不能为空");
                            return;
                        }
                    }
                    return self.data.model;
                }
            },
        }
        oper.init()
    });
</script>